<template>
    <div class="user">
        <!-- 左边 -->
        <div class="left">
            <img src="../imgs/3.webp" alt="">
            <!-- 用户 -->
            <div class="info">
                <p class="nickname">用户195941233</p>
                <div class="memdershipLevel">
                    <span class="memderTitle">普通用户</span>
                </div>
            </div>
        </div>
        <!-- 右边 -->
        <div class="right">
            <i class="icon_normal"></i>
            <div class="m_supermcEntrance">
                <i class="u_icon"></i>
                <div class="word">
                    <div class="line1">Pro会员</div>
                    <div class="line2">
                        立即开通
                        <van-icon name="arrow" class="u_icon_arrow" />
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">

</script>

<style scoped lang="less">
.user {
    width: 100%;
    height: 135px;
    background-image: url('https://yanxuan.nosdn.127.net/5905098f74e04c39fa5e76ebb9ff591b.png');
    background-repeat: no-repeat;
    position: relative;
    display: flex;
    justify-content: space-between;
}

.left {
    margin-left: 15px;
    overflow: hidden;
    display: flex;
    align-items: center;
    padding: 32px 0;

    img {
        width: 71px;
        height: 71px;
        border-radius: 50%;

    }

}

.info {
    color: #fff;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    font-size: 16px;
    margin-left: 15px;
}

.right {
    position: relative;
    width: 119.5px;
    height: 94px;
    padding-left: 8.5px;

    .icon_normal {
        position: absolute;
        right: 5.25px;
        top: 6px;
        vertical-align: middle;
        background-size: 187.5px 168.75px;
        display: inline-block;
        height: 32px;
        width: 32px;
        background-image: url(//yanxuan-static.nosdn.127.net/hxm/yanxuan-mall-wap/assets/img/ucenter-11eb865ad061b2dd08d2ec54d87461d6.png);
    }

    .m_supermcEntrance {
        
        display: flex;
        height: 42px;
        width: 110px;
        padding: 0 10px 0 5px;
        margin-top: 52.5px;
        white-space: nowrap;
        border-top-left-radius: 24px;
        border-bottom-left-radius: 24px;
        overflow: hidden;
        background-color: black;

        .u_icon {
            display: inline-block;
            height: 28px;
            width: 28px;
            margin: 7px 4.5px;
            background-size: 180px 160px;
            background-position: -34px -40px;
            background-image: url(//yanxuan-static.nosdn.127.net/hxm/yanxuan-mall-wap/assets/img/ucenter-11eb865ad061b2dd08d2ec54d87461d6.png);
        }

        .word {
            padding: 5px 0;

            .line1 {
                font-size: 12px;
                line-height: 13.5px;
                margin-bottom: 5px;
                color: #f9e0c0;
            }

            .line2 {
                font-size: 12px;
                line-height: 10.5px;
                vertical-align: middle;
                color: #f9e0c0;

                .u_icon_arrow {
                    display: inline-block;
                    margin: -2px 0 0 2px;
                    height: 9px;
                    width: 9px;
                }

            }
        }
    }
}
</style>